<template>
	<div class="container">
		<div class="rail"></div>
		<div class="content" :style="{width: contentW + 'px', left: leftL + 8 + 'px'}"></div>
		<div class="left" @touchstart="start" @touchmove.stop="move" @touchend.stop="end" :style="{left: leftL + 'px'}"></div>
		<div class="right" @touchstart="start2" @touchmove.stop="move2" @touchend.stop="end2" :style="{left: rightL + 'px'}"></div>
	</div>
</template>

<script>
	import { ref, toRefs, reactive, onMounted, computed } from 'vue'
	export default{
		name: 'TRangeSlider',
		props: {
		},
		setup(props, ctx) {
			let isFirst = true
			let isFirst2 = true

			const leftL = ref(0)
			let lefX = ref(0);

			const rightL = ref(184)
			let rightX  = ref(184);

			const contentW = computed(() => {
				const w = rightL.value  - leftL.value
				if(w< 0) {
					return 0
				}else if(w > 184){
					return 184;
				}else{
					return w
				}
    	})

			const start = (e) => {
				if(isFirst) {
					lefX.value = e.touches[0].clientX;
					isFirst = false
				}
			}
			const move = (e) => {
				const l = e.touches[0].clientX - lefX.value
				
				if(l > rightL.value){
					leftL.value = rightL.value
					ctx.emit('leftchange', {
						l: leftL.value / 184,
						per: contentW.value / 184,
					})
					return
				}
				if( l < 0) {
					leftL.value = 0
				}else if(l > 184) {
					leftL.value = 184
				}else{
					leftL.value = l
				}
				ctx.emit('leftchange', {
						l: leftL.value / 184,
						per:contentW.value / 184,
					})
			}
			const end = () => {

			}

			const start2 = (e) => {
				if(isFirst2) {
					rightX.value = e.touches[0].clientX;
					isFirst2 = false
				}
			
			}
			const move2 = (e) => {
				const l = 184 - rightX.value + e.touches[0].clientX
				if(l < leftL.value){
					rightL.value = leftL.value
					ctx.emit('rightchange', {
						l: rightL.value / 184,
						per: contentW.value / 184,
					})
					return;
				}

				if( l< 0) {
					rightL.value = 0
				}else if(l> 184) {
					rightL.value = 184
				}else{
					rightL.value = l
				}

				ctx.emit('rightchange', {
						l: rightL.value / 184,
						per: contentW.value / 184,
					})
			}
			const end2 = () => {}

			
			 
			return {
				lefX,
				rightX,
				leftL,
				rightL,
				contentW,
				start,
				move,
				end,
				start2,
				move2,
				end2,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		position: relative;
		width: 200px;
		height: 16px;

		

		.rail{
			width: 184px;
			height: 10px;
			background: rgb(212, 212, 212);
			border-radius: 10px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.content{
			height: 10px;
			background: rgb(122, 184, 255);
			border-radius: 10px;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}

		.left{
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background: #fff;
			position: absolute;
			top: 0;
			left: 0;
			cursor: pointer;
		}

		.right{
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background: #fff;
			position: absolute;
			top: 0;
			right: 0;
			cursor: pointer;
		}
	}
</style>
